<template>
    <div class="app-container">
        <div class='table' v-cloak>
            <table class='dialogTable1' align="left">
                <tr><th style="width:12%">星期</th><th>值日学生</th></tr>
                <tr v-for='(data,index) in dataApply' :key="index">
                    <td style="background:#f7f7f7;">{{data.date}}</td>
                    <td>
                        <el-select v-model="data.value" multiple filterable placeholder="请选择" 
                        size="large" style="width:100%;" @change="changeDuty($event,index)">
                            <el-option
                            v-for="item in options"
                            :key="item.fStudentId"
                            :label="item.sStudentName"
                            :value="item.fStudentId">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import {listStudentByClassId} from 'api/wisdom';
export default{
    props: {
        dataList: {
            type: Array,
            default: null
        },
        classId: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            dataApply: [],
            dataApplyOrder: [],
            options: [{fStudentId: '', sStudentName: '请选择'}],
            // value5: '',
            date: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    },
    created() {
        // this.getFirstList();
        // this.getStudent();
    },
    methods: {
        getFirstList(dataList) {
            this.dataApply=[];
            for (let i = 0;i < 7 ;i++) {
                let temp = {
                    value: dataList[i]?dataList[i].split(','):[],
                    date: this.date[i]
                };
                this.dataApply.push(temp);
            }
        },
        changeDuty(list, index) {
            // //console.log(this.dataApply, 'this.dataApply')
            if (list.length>12) {
                this.$message.error('每天值日生不超过12个')
                this.dataApply[index].value.pop();
            }

        },
        // 获取学生-值日
        getStudent(classId) {
            listStudentByClassId(classId).then(res => {
                this.options=res.data.content;
            })
        },
           // 父组件调用获取
        getDataApply() {
            this.$emit('dataApply', this.dataApply)
        }
    }
}
</script>

<style lang="scss">
.app-container {
    position: relative;
    padding: 20px 18px 10px;
    .btnPosition{
        margin-bottom:20px;
    }
    .table{
        font-size: 14px;
        box-sizing:border-box;
        width:100%;
        text-align:center;
        .dialogTable1{
            text-align:center;
            width: 100%;
            th{
                background:#f7f7f7;
            }
            td,th{
                text-align:center;
                border:1px solid #ccc;
                height:70px;
                .el-select .el-input .el-input__inner{
                    box-shadow:none;
                }
                .el-tag--primary {
                    background-color: #f7f7f9;
                    border-color: #fff;
                    color: #333;
                }
            }
        }
    }
}

</style>
